<template>
    <div class="content">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px" v-show="showSearch">
            <el-form-item label="日期">
                <el-form-item label-width="0px">
                    <el-date-picker style="width:140px" v-model="queryParams.startTime" type="date" placeholder="开始时间"
                        value-format="YYYY-MM-DD"  :disabled-date="startDisableDate"/>
                </el-form-item>
                <span class="spanStyle">至</span>
                <el-form-item>
                    <el-date-picker style="width:140px" v-model="queryParams.endTime" type="date" placeholder="结束时间"
                        value-format="YYYY-MM-DD" :disabled-date="endDisableDate"/>
                </el-form-item>
            </el-form-item>
            <el-form-item label="震级">
                <el-form-item label-width="0px">
                    <el-input style="width:140px" v-model="queryParams.startMagnitude" placeholder="请输入" />
                </el-form-item>
                <span class="spanStyle">~</span>
                <el-form-item label-width="0px">
                    <el-input style="width:140px" v-model="queryParams.endMagnitude" placeholder="请输入" />
                </el-form-item>
            </el-form-item>
            <el-form-item label="经度">
                <el-form-item label-width="0px">
                    <el-input style="width:140px" v-model="queryParams.startLongitude" placeholder="请输入" />
                </el-form-item>
                <span class="spanStyle">~</span>
                <el-form-item label-width="0px">
                    <el-input style="width:140px" v-model="queryParams.endLongitude" placeholder="请输入" />
                </el-form-item>
            </el-form-item>
            <el-form-item label="纬度">
                <el-form-item label-width="0px">
                    <el-input style="width:140px" v-model="queryParams.startLatitude" placeholder="请输入" />
                </el-form-item>
                <span class="spanStyle">~</span>
                <el-form-item label-width="0px">
                    <el-input style="width:140px" v-model="queryParams.endLatitude" placeholder="请输入" />
                </el-form-item>
            </el-form-item>
            <el-form-item label="参考位置" prop="location">
                <el-input style="width:300px" v-model="queryParams.location" placeholder="请输入参考位置" clearable />
            </el-form-item>
            <el-form-item label="关键词">
                <el-input style="width:300px" v-model="queryParams.eventAbbrevia" placeholder="请输入关键词" />
            </el-form-item>
            <el-form-item label="行政区">
                <el-form-item label-width="0px">
                    <el-select v-model="queryParams.province" placeholder="省" @change="chooseProvince" clearable
                        value-key="id" style="width:140px;">
                        <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <span class="spanStyle"></span>
                <el-form-item label-width="0px">
                    <el-select v-model="queryParams.city" placeholder="市" @change="chooseCity" style="width:140px;"
                        value-key="id" clearable>
                        <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form-item>
            <el-form-item label=" ">
                <el-form-item label-width="0px">
                    <el-select v-model="queryParams.district" placeholder="区县" @change="chooseCounty" style="width:140px;"
                        value-key="id" clearable>
                        <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <span class="spanStyle"></span>
                <el-form-item label-width="0px">
                    <el-select v-model="queryParams.town" placeholder="乡镇" @change="chooseCounty" style="width:140px;"
                        value-key="id" clearable>
                        <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form-item>
            <el-row>
                <el-col style="text-align: center">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                        <el-button type="primary" @click="resetQuery">清空</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading" ref="tableRef" :data="dataList" stripe @selection-change="handleSelectionChange"
            row-key="jedsId" style="margin-bottom: 20px;">
            <el-table-column label="地震事件简称" align="center" prop="eventAbbrevia" show-overflow-tooltip />
            <el-table-column label="参考位置" align="center" prop="location" show-overflow-tooltip />
            <el-table-column label="日期" align="center" prop="occurrenceDate" show-overflow-tooltip />
            <el-table-column label="经度（°）" align="center" prop="longitude" show-overflow-tooltip />
            <el-table-column label="纬度（°）" align="center" prop="latitude" show-overflow-tooltip />
            <el-table-column label="震级" align="center" prop="magnitude" show-overflow-tooltip />
            <el-table-column label="震源深度（km）" align="center" prop="depth" show-overflow-tooltip />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getList" />
    </div>
</template>
  
<script setup name="viewAll">
import { getProvince, getChildArea } from "@/api/system/division";
import { getAllList } from "@/api/informationRetrieval/historicalSeismicEvent.js"
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const dataList = ref([]);
const ids = ref([]);
const loading = ref(false);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const showSearch = ref(true);
const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]); //区、县

const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        startTime: route.query.startTime ? route.query.startTime : undefined,
        endTime: route.query.endTime ? route.query.endTime : undefined,
        startMagnitude: route.query.startMagnitude ? route.query.startMagnitude : undefined,
        endMagnitude: route.query.endMagnitude ? route.query.endMagnitude : undefined,
        endLongitude: route.query.endLongitude ? route.query.endLongitude : undefined,
        startLatitude: route.query.startLatitude ? route.query.startLatitude : undefined,
        endLatitude: route.query.endLatitude ? route.query.endLatitude : undefined,
        location: route.query.location ? route.query.location : undefined,
        province: route.query.province ? route.query.province : undefined,
        city: route.query.city ? route.query.city : undefined,
        district: route.query.district ? route.query.district : undefined,
        town: route.query.town ? route.query.town : undefined,
        eventAbbrevia: route.query.eventAbbrevia ? route.query.eventAbbrevia : undefined,
    },
})
const { queryParams, } = toRefs(data);

function getCityData() {
    if (queryParams.value.city) {
        provinceData.value.forEach(item => {
            if (item.name == queryParams.value.province) {
                getChildArea(item.id).then(response => {
                    cityData.value = response.data;
                    getAreaData();
                });
            }
        })
    } else {
        cityData.value = [];
    }
}

function getAreaData() {
    if (queryParams.value.district && cityData.value) {
        cityData.value.forEach(val => {
            if (val.name == queryParams.value.city) {
                getChildArea(val.id).then(response => {
                    areaData.value = response.data;
                });
            }
        })
    } else {
        areaData.value = [];
    }
}

// 查看
function handleDetail(row) {
    router.push({
        path: '/informationRetrieval/historicalSeismicInformation/historicalSeismicEvent/earthquakeDisasterDataDetail',
        query: {
            occurrenceDate: row.occurrenceDate,
            occurrenceTime: row.occurrenceTime,
            location: row.location,
            magnitude: row.magnitude,
            eventAbbrevia:row.eventAbbrevia,
            latitude:row.latitude,
            longitude:row.longitude,
            depth:row.depth,
        }
    })
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    queryParams.value = {
        page: 1,
        rows: 10,
        startTime: undefined,
        endTime: undefined,
        startMagnitude: undefined,
        endMagnitude: undefined,
        startLongitude: undefined,
        endLongitude: undefined,
        startLatitude: undefined,
        endLatitude: undefined,
        location: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        town: undefined,
        eventAbbrevia: undefined,
    }
    handleQuery();
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
        loading.value = false;
    });
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.jedsId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}


function chooseProvince(value) {
    queryParams.value.province = value.name;
    queryParams.value.city = null;
    queryParams.value.district = null;
    cityData.value = [];
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}

function chooseCity(value) {
    queryParams.value.city = value.name;
    queryParams.value.district = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}
function chooseCounty(value) {
    queryParams.value.district = value.name;
}

/** 获取省列表 */
function getProvinceData() {
    getProvince().then(response => {
        provinceData.value = response.data;
        getCityData();
    });
}

// 时间可选范围控制
const startDisableDate = (time) => {
	let endDateVal = queryParams.value.endTime;
	if (endDateVal) {
		return time.getTime() > new Date(endDateVal).getTime();
	}
};
const endDisableDate = (time) => {
	let beginDateVal = queryParams.value.startTime;;
	if (beginDateVal) {
		return time.getTime() < new Date(beginDateVal).getTime();
	}
};
getList();
getProvinceData();
</script>
  
<style lang="scss" scoped>
.content {
    margin-top: 20px;
}

.tab-title {
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #0D9AFF;
    font-family: PingFangSC-Medium;
    padding-left: 10px;
    margin-bottom: 20px;
}

:deep(.el-drawer__header) {
    margin-bottom: 0px !important;
}

.el-form--inline .el-form-item {
    margin-right: 0px !important;
}

.spanStyle {
    display: inline-block;
    width: 20px;
    text-align: center;
}

:deep(.el-table__expand-icon) {
    display: none;
}
</style>
  